<template>
   <tbody>
    <tr>
      <!-- 单选双向绑定 -->
      <td> <input type="checkbox" name="" id="" :checked='item.checked' @change="changeFn(index)"></td>
      <td>{{item.name}}</td>
      <td>{{item.price}}</td>
      <td>
        <button @click='clickFn(-1,index)'>-</button>{{item.num}}<button  @click='clickFn(1,index)'>+</button></td>
      <td>{{item.num*item.price}}</td>
      <td><button @click='del(index)'>删除</button></td>
    </tr>
        
  </tbody>
</template>

<script>
//import { mapGetters } from 'vuex'
export default {
  props:['item','index'],
  methods:{
    //加减
    clickFn(n,index){
      //获取更新后的数据
      const newNum=this.item.num+n
      //更新后的数字不能小于1
      if(newNum<1)return
      //mutations 修改数据
      this.$store.commit('cart/updateCount',{
        num:newNum,
        index
      })
    },
    //删除
    del(index){
      this.$store.commit('cart/del',index)
    },
    //复选框
    changeFn(index){
      this.$store.commit('cart/changeChecked',index)
    }
  }
 

}
</script>

<style>

</style>